<template>
    <div class="login-container">
        <h1>请登录</h1>
        <P>{{ ts }}</P>
        <el-form status-icon :rules="rules" label-width="120px" class="demo-ruleForm">

            <el-form-item label="帐号" prop="username">
                <el-input type="text" placeholder="用户名" v-model="uname" />
            </el-form-item>
            <el-form-item label="密码" prop="password" label-width="120px">
                <el-input type="password" placeholder="密码" v-model="password" />
            </el-form-item>

            <el-form-item style="width:50%;color: #cac6c6">
                <el-button type="primary" style="width:100%;" @click="handleSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            uname: '',
            password: '',
            ts:'',
            // rules: {
            //     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
            //     password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            // }
        }
    },
    methods: {
        handleSubmit() {
            if (this.uname === 'admin' && this.password === '1') {
                console.log("登录成功");
                const userInfo = {
                    name:'刘德华',
                    phone:'13297777187',
                    gender:'男'
                }
                this.$store.commit('updateUser',userInfo)
                this.$router.push({path:'/index'})
            } else {
                console.log("登录失败"),
                this.ts = '帐号密码错误';
            }
        }
    }
}

</script>


<style scoped>
.login-container {
    width: 400px;
    height: 400px;
}
</style>